<template>
  <div style="padding: 10px">
    <el-form :model="selectData" :inline="true" class="demo-form-inline">
      <el-form-item label="出库单号">
        <el-input v-model="selectData.orderId" placeholder="请输入出库单号"></el-input>
      </el-form-item>
      <el-form-item label="出库日期">
        <el-date-picker v-model="selectData.orderDate" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查找</el-button>
      </el-form-item>
    </el-form>

    <div style="padding: 10px">
      <el-table :data="tableData">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="orderId" label="出库单号"></el-table-column>
        <el-table-column prop="orderDate" label="出库日期"></el-table-column>
        <el-table-column prop="customerId" label="客户编号"></el-table-column>
        <el-table-column prop="brandId" label="品牌编号"></el-table-column>
        <el-table-column prop="specification" label="规格"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="permission" label="状态"></el-table-column>
        <el-table-column prop="brand" label="品牌"></el-table-column>
        <el-table-column prop="user" label="客户"></el-table-column>
      </el-table>
    </div>
  </div>
  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination
        v-model:current-page="selectData.current"
        v-model:page-size="selectData.size"
        v-model:total="total"
        :page-sizes="[1, 5, 7, 10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

</template>

<script lang="ts" setup>
    import {reactive} from "vue";
    import { ref } from 'vue'
    import axios from "axios";
    import dayjs from "dayjs";

    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const total=ref(10)

    const tableData = ref([])
    const selectData = ref({
      orderId:'',
      orderDate:'',
      current: 1,
      size: 5
    })

    const timeFormatter = (row, column, value) => {
        return dayjs(value).format('YYYY-MM-DD')
    }

    const search = () => {
      axios.post('/out/list',selectData.value)
          .then(response => {
            // 请求成功后的处理
            tableData.value=response.data.data.records;
            total.value=response.data.data.total;
            console.log(response.data);
          })
          .catch(error => {
            // 请求失败后的处理
            console.error(error);
          });
    }

    const handleSizeChange = (val: number) => {
      // 更新分页大小
      selectData.value.size = val;
      // 更新当前页码为 1
      selectData.value.current = 1;
      // 重新请求数据
      search();
    }
    const handleCurrentChange = (val: number) => {
      // 更新当前页码
      selectData.value.current = val;
      // 重新请求数据
      search();
    }
</script>
